<template>
<div class="groupContainer">
    <v-bread :itemList.sync="itemList" :selected.sync="selected" @returnChecked="handleChecked"></v-bread>
    <v-search-btn @returnCheck="returnClick"></v-search-btn>
    <div v-if="!isSearchShow" class="container_con">
        <div v-if="listItem.length>0" class="list">
            <v-list :listItem.sync="listItem" @returnClickNode="returnClickNode"></v-list>
        </div>
        <v-show-person v-if="responsePeoList.length>0"  :response="responsePeoList"></v-show-person>
        <div v-if="isSending" style="height:0.8rem;line-height:0.8rem;width:100%;text-align:center;">加载中</div>
    </div>
    <div v-if="isSearchShow">
        <v-show-person v-if="responsePeoListSearch.length>0"  :response="responsePeoListSearch"></v-show-person>
        <div v-if="isSending" style="height:0.8rem;line-height:0.8rem;width:100%;text-align:center;">加载中</div>
    </div>

    <v-search :showSearch.sync="showMask" type="leader" :isEnd.sync="isSearchEnd" :pageNum.sync="searchNum" :dataList.sync="responsePeoListSearch"   @searchName="searchPeo"></v-search>

    <v-panel v-if="showPanel" :secondShow.sync="secondShow" :isShow.sync="showPanel"  :isFirstShow.sync="isFirstShow" @loadEnd="loadEnd"></v-panel>
    <mt-spinner v-if="spinnerShow" class="spinner" type="fading-circle" color="#26a2ff"></mt-spinner>

</div>
 
</template>

<script>
import Vue from 'vue'
import { Spinner} from "mint-ui";
Vue.component(Spinner.name, Spinner);
import Bus from '@/common/js/vueBus'
import Bread from "@/components/groupDept/bread"
import list from "@/components/groupDept/listItem"
// import personView from "@/components/groupDept/searchShow";
import personView from "@/components/personal/tab1view";
import serachBox from "@/components/groupDept/searchFixed"
// const peoResume = r => require.ensure([],() => r(require('@/components/personal/peoPanel')),'peoPanel');
// const Search = r => require.ensure([],() => r(require('@/components/personal/personalShow')),'personalShow');
import Search from '@/components/personal/personalShow'

import peoResume from '@/components/personal/peoPanel' 

import showLoading from '@/common/js/loading'
export default {
  name: "app",
  components: {
    'v-bread':Bread,
    'v-search-btn': serachBox,
    'v-list':list,
    "v-show-person": personView,
    'v-search':Search,
    'v-panel':peoResume
  },
  data() {
    return {
        itemList:[{descr:'招商局集团',setid:'',deptid:'',whe_sub:1}],
        listItem:[],
        response: [],
        searchInput:false,
        isNext:false,
        returnVal:{descr:'招商局集团',setid:'',deptid:'',whe_sub:1},
        selected:0,
        doneDataListShow:false,
        responsePeoList:[],
        searchText:'',
        isSearchShow:false,
        
        isSearchEnd:false,
        responsePeoListSearch:[],
        searchNum:1,

        searchRecord:false,
        isLoadEnd:false,
        isSending:false,
        pageNum:1,
        
        showMask:false,

        isShowResume:false,
        spinnerShow:false,
        showPanel:false,
        isFirstShow:true,
        secondShow:true,

    };
  },
  created() {

        // if (location.search) {
        //     var token = location.search.split("=")[1];
        //     localStorage.setItem('token',token);
        //     this.Axios.Post(this.URL.webLogin.url,{}).then(res=>{
                    
        //             if (res.data.status === 1) {
                        
        //                 this.postAjax();
        //             }
        //     })

        // } else {
            this.postAjax();
        // }
        Bus.$on('showPanel',(val)=>{
            this.showPanel = true;
            this.spinnerShow = true;
        })
        window.addEventListener("scroll",this.scrollFunc);
  },
  watch: {
        searchText: function(newVal, oldVal) {
            if (!newVal || !newVal.trim()) {
                return;
            }
            this.clearData();
            this.searchText = newVal;
            this.searchPeo();
            
        },
        isSearchShow:function(newVal, oldVal){
            if (newVal) {
                
            } else {
                this.clearData();
            }
        },
  },
  computed: {

  },
  methods: {
    loadEnd:function(){
        this.spinnerShow = false;
    },

    returnClick:function(){
        this.responsePeoListSearch=[];
        this.showMask = true;
    },


    clearData:function(){
        this.searchNum = 1;
        this.isSearchEnd = false;
        this.responsePeoListSearch = [];
    },

    postAjax:function(setid,deptid,isLoading){
        if (!isLoading) {
            showLoading.showLoginPanel();
            setTimeout(function(){
                showLoading.destroyInstance();
            },14000)
        }

        return this.Axios
            .StringPost(this.URL.getDeptparentBylist.url ,{setid:setid || '',parent_deptid:deptid || '',type:1,flag:1,pageSize:10,pageNum:this.pageNum},true)
            .then(res => {
                if (!isLoading) {
                    showLoading.destroyInstance();     
                }
                this.isSending = false;
                var result = res.data.datas.deptmune;
                console.log(result,"result");
                this.listItem = result;
                this.responsePeoList = this.responsePeoList.concat(res.data.datas.emplList || []) ;
                if (!res.data.datas.emplList || res.data.datas.emplList.length < 10) {
                    this.isLoadEnd = true;
                }
                this.isNext=false;

               
            });
    },
    clearClickNodeData:function(){
        this.responsePeoList = [];
        this.isLoadEnd = false;
        this.pageNum = 1;
    },
    returnClickNode:function(node){

        this.clearClickNodeData();
        this.returnVal = node;
        this.postAjax(node.setid,node.deptid)
            .then(()=>{
                this.itemList.push(node);
                this.selected = this.itemList.length-1;
            });


                
        
    },
    handleChecked:function(index){
        var item = this.itemList[index];
        this.clearClickNodeData();
        if (item.whe_sub) {
            this.itemList = this.itemList.slice(0,index+1);
            this.selected = this.itemList.length - 1;
            this.postAjax(item.setid,item.deptid);
        }

    },

    scrollFunc:function(event) {
        var self = this;
        console.log('scrollFunc');
        if ( this.isLoadEnd || this.isSending) {
            return;
        }
        if (this.isLoadEnd && !this.isSearchShow) {
            return;
        }
        if (this.isSearchShow && this.isSearchEnd) {
            return;
        }
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; 
        if(document.documentElement.scrollHeight - (document.documentElement.clientHeight + scrollTop) == 0 ) {
            self.isSending = true;
            if (self.isSearchShow) {
                self.searchNum++;
                self.searchPeo();
               
            } else {
                self.pageNum++;
                self.postAjax(self.returnVal.setid,self.returnVal.deptid,true);
            }
            
            
            // self.getLeaderListCommonAjax();
        }    
    },
    throttle : function (wait, mustRun) {
        var timeout,
            startTime = new Date();
    
        return function() {
            var context = this,
                args = arguments,
                curTime = new Date();
    
            clearTimeout(timeout);
            // 如果达到了规定的触发时间间隔，触发 handler
            if(curTime - startTime >= mustRun){

                startTime = curTime;
            // 没达到触发间隔，重新设定定时器
            }
        };
    },

    searchPeo: function(name,val) {
        if (val !== 'more') {
            this.responsePeoListSearch = [];
            this.isSearchEnd =false;
        }
        if (!name || !name.trim()) {
            this.spinnerShow = false;
            return;
        }
        this.spinnerShow = true;
        var params = {
            search: name,
            pageSize: 10,
            pageNum: this.searchNum,
        }
        this.Axios.Post(this.URL.getPostionBySearch.url, params)
            .then(res => {
                this.spinnerShow = false;
                // showLoading.destroyInstance();
                this.isSending = false;

                this.responsePeoListSearch = this.responsePeoListSearch.concat(res.data.datas || []);
                var total = res.data.page ? res.data.page.total : res.data.total;
                if (total==0 || this.responsePeoListSearch.length === total) {
                    this.isSearchEnd = true;
                }
                
            });
    },
  }
};
</script>

<style scoped="scoped" lang="less">
.container_con{
    margin-top:1.1rem;
}

</style>
<style>
    .nodate{
      text-align:center;
      font-size:0.32rem;
    }
    .null-container{
        height: 5.2rem;
        background:url(/static/imgs/nodata.png) no-repeat center;
    }
    .spinner>div{
    position: fixed;
    top:0;
    bottom:0;
    left: 0;
    right:0;
    z-index:10000;
    margin:auto;
    width: 1rem !important;
    height: 0.8rem !important;
}

</style>


